@import "../imports/mixins";

.jw-skin-six {
    @active-color: #eee;
    @inactive-color: #aaa;
    @buffer-color: #202020;
    @hover-color: @active-color;
    @thumb-color: radial-gradient(ellipse at center, #f3f3f3 0%, #d2d2d2 90%, #b0b0b0 100%);
    @progress-color: @active-color;
    @rail-color: #666;
    @font-color: @active-color;

    @def-border: 1px solid black;
    @def-background-size: 100% 100%;
    @def-background-color: #444;    // Will be primarily seen in IE 8
    @def-background-style: linear-gradient(0deg, rgba(73, 73, 75, 0.87) 0, rgba(69, 69, 71, 1) 3%, rgba(63, 63, 65, 1) 7%, rgba(62, 62, 64, 1) 10%, rgba(58, 58, 61, 1) 59%, rgba(52, 52, 55, 1) 97%, rgba(52, 52, 55, 0.87) 100%);
    /* W3C */
    @def-transparent-background-style: linear-gradient(0deg, rgba(73, 73, 75, 0.85) 0, rgba(69, 69, 71, 0.9) 3%, rgba(63, 63, 65, 0.9) 7%, rgba(62, 62, 64, 0.9) 10%, rgba(58, 58, 61, 0.9) 59%, rgba(52, 52, 55, 0.9) 97%, rgba(52, 52, 55, 0.85) 100%);

    @controlbar-background: @def-background-style;
    /* W3C */

    @def-progress-color: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0, rgba(204, 204, 204, 1) 50%, rgba(255, 255, 255, 1) 100%);
    @rail-glow: inset 0 3px 10px 1px rgba(51, 51, 51, 0.85);

    @cc-inactive: @buffer-color;
    @cc-active: @active-color;

    @dock-corner-radius: 0.25em;

    @volume-background: @def-background-style;
    @volume-border: @def-border;
    @volume-padding: 0.5em;

    @rail-height: .65em;
    @thumb-size: .8em;
    @cue-size: .25em;
    @slider-height: 1.2em;

    @controlbar-height: 2em;

    @nextup-position-bottom: @controlbar-height + 0.7em + 0.5em;
    @nextup-position-bottom-touch: (@controlbar-height * 1.5em) + 0.7em + 0.7em;
    @nextup-position-right: 2%;
    @nextup-border-radius: 0.3em;
    @nextup-header-background: fade(@def-background-color, 90%);
    @nextup-body-background: darken(@nextup-header-background, 20%);
    @nextup-body-text-color-overflow: darken(@def-background-color, 20%);

    #namespace > .controlbar-height();
    #namespace > .basic-skin-styles(); // Using the above local variables
    #namespace > .touch-flag-skin-styles(); // Using the above local variables
    #namespace > .set-global-color-classes();


    .skin-element-padding();
    /* Controlbar styles */
    .inset-controlbar();

    .jw-background-color {
        background-color: @def-background-color;
    }

    .jw-controlbar {
        border: @def-border;
        border-radius: .3em;
        background-size: @def-background-size;

        .jw-overlay {
            bottom: 2em;
            padding-bottom: .25em;
        }
    }

    &.jw-breakpoint-0 .jw-controlbar {
      height: 2.1em;
    }

    /* Styles for play button on idle */
    .jw-display-icon-container {
        background: @def-transparent-background-style;
        background-size: @def-background-size;
        border-radius: .3em;
        border: @def-border;
    }

    &:hover {
        .jw-display-icon-container {
            background: @def-background-style;
            background-size: @def-background-size;
        }
    }

    /* Styles for menu list items */
    .jw-option {
        .jw-icon-menu-bullet {
            &:before {
                content: "\e606";
            }
        }

        text-align: left;

        &:before {
            font-size: .4em;
            vertical-align: middle;
            margin-right: .4em;
        }
    }

    /* Rail/slider styles */
    .jw-rail,
    .jw-buffer,
    .jw-progress {
        border-radius: 0.5em;
    }

    .jw-progress,
    .jw-buffer {
        border: @def-border;
    }

    .jw-progress {
        background: @def-progress-color;
    }

    .jw-rail {
        border: @def-border;
        box-shadow: @rail-glow;
    }

    .jw-knob {
        width: @thumb-size;
        height: @thumb-size;
        border-radius: 1em;
        background: @thumb-color;
        box-shadow: 0px 1px 10px 1px rgba(0,0,0,0.75);
    }

    /* Timeline and horizontal volume slider */
    .jw-slider-horizontal {
        .jw-knob {
            .vertically-centered-rail-element(@rail-height, @thumb-size);
        }

        .jw-progress {
            border-radius: 0.5em 0 0 0.5em;
        }

        .jw-progress,
        .jw-buffer {
            border: @def-border;
            border-style: solid none #000;
        }

        .jw-cue {
            .vertically-centered-rail-element(@rail-height, @cue-size);

            width: @cue-size;
            height: @cue-size;
            background-color: #616164;
            border-radius: 50%;
            box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.75);
        }
    }

    /* Volume slider */
    .jw-slider-vertical {
        .jw-rail,
        .jw-progress {
            width: @rail-height;
        }

        .jw-progress {
            background: linear-gradient(to right, rgba(255, 255, 255, 1) 0, rgba(204, 204, 204, 1) 50%, rgba(255, 255, 255, 1) 100%);
            border-top-right-radius: 0;
            border-bottom-right-radius: 0.5em;
            border-bottom-left-radius: 0.5em;
            border-top-left-radius: 0;
        }

        .jw-knob {
            .horizontally-centered-rail-element(@rail-height, @thumb-size);
        }
    }

    /* For the overlay containers */
    .jw-time-tip,
    .jw-volume-tip,
    .jw-menu {
        background-size: @def-background-size;
        border-radius: @ui-padding;
    }

    /* Dock styles */
    .jw-dock {
        .jw-dock-button {
            background: @def-transparent-background-style;
            background-size: @def-background-size;
            border-radius: @dock-corner-radius;

            &:hover {
                background: @def-background-style;
            }

            .jw-overlay {
                background: @def-background-style;
                background-size: @def-background-size;
                border-radius: @dock-corner-radius;
            }
        }
    }

    /* Skip styles */
    .jw-skip {
        background: @def-transparent-background-style;
        background-size: @def-background-size;
        border: @def-border;
        border-radius: .3em;

        &:hover.jw-skippable {
            background: @def-background-style;
            background-size: @def-background-size;
        }
    }

}
